<template>
  <div class="swagger2dts" v-show="!config.visible" @click="onOpen">
    <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M16 4C14 4 11 5 11 9C11 13 11 15 11 18C11 21 6 23 6 23C6 23 11 25 11 28C11 31 11 35 11 39C11 43 14 44 16 44"
        stroke="#333"
        stroke-width="4"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M32 4C34 4 37 5 37 9C37 13 37 15 37 18C37 21 42 23 42 23C42 23 37 25 37 28C37 31 37 35 37 39C37 43 34 44 32 44"
        stroke="#333"
        stroke-width="4"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
  <el-drawer
    :size="1000"
    :with-header="false"
    direction="rtl"
    custom-class="swagger2dts-drawer"
    v-model="config.visible"
  >
    <div class="code-box">
      <div class="code-box-header">
        {{ config.title }}
      </div>
      <div class="code-box-body">
        <CodeView :content="config.text" />
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts">
import { onMessage } from '@shared/clientMessage'
import { ContextMenuId, PostMessageType } from '@shared/types'
import { defineComponent, shallowReactive } from 'vue'
import axios from 'axios'
import { SwaggerToInterface } from './plugins/source/source'
import { ElMessage } from 'element-plus'
import CodeView from './components/CodeView.vue'
import { copyText } from '@shared/index'

export default defineComponent({
  name: 'Swagger2dtsApp',
  components: { CodeView },
  setup() {
    const config = shallowReactive({
      visible: false,
      text: '',
      title: '',
      source: null as null | SwaggerToInterface
    })

    onMessage(PostMessageType.CONTEXT_MENU, runMenuCommand)

    onMessage(PostMessageType.CONNECT, (docsApi: string) => {
      axios.get(docsApi).then(({ data }: any) => {
        config.source = new SwaggerToInterface(data)
      })
    })

    if (import.meta.env.DEV) {
      axios
        .get(`http://esg-eal-anode-saas.caas-cloud-test.geega.com/v3/api-docs`)
        .then(({ data }: any) => {
          config.source = new SwaggerToInterface(data)
        })
    }

    function createInterface() {
      const operationId = location.hash.slice(1).split('/').at(-1)!

      const { source } = config
      if (source) {
        config.title = source.getTitle({ operationId })
        return source.getInterface({ operationId })
      }
      return Promise.reject('swagger 参数还未初始值')
    }

    function runMenuCommand(menuId: ContextMenuId) {
      createInterface().then(
        (text) => {
          switch (menuId) {
            case ContextMenuId.PREVIEW: {
              config.text = text
              config.visible = true
              break
            }
            case ContextMenuId.CONSOLE_GROUP: {
              console.group()
              console.log(text)
              console.groupEnd()
              ElMessage.success('已打印，请前往控制台查看')
              break
            }
            case ContextMenuId.CONSOLE_GROUP_COOLAPSED: {
              console.groupCollapsed()
              console.log(text)
              console.groupEnd()
              ElMessage.success('已打印，请前往控制台查看')
              break
            }
            case ContextMenuId.CLIPBOARD_WRITE_TEXT: {
              copyText(text).then(
                () => {
                  ElMessage.success('已写入粘贴板')
                },
                (e) => {
                  ElMessage.error(`写入粘贴板失败: ${e?.message}`)
                }
              )
              break
            }
          }
        },
        (message) => {
          ElMessage.error(message?.message || '执行失败')
        }
      )
    }

    function onOpen() {
      runMenuCommand(ContextMenuId.PREVIEW)
    }

    return { config, onOpen }
  }
})
</script>

<style lang="scss">
.swagger2dts {
  position: fixed;
  z-index: 100000;
  right: 20px;
  bottom: 50px;
  border: 1px solid #e5e5e5;
  background-color: #e5e5e5;
  border-radius: 50%;
  overflow: hidden;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1 ease-in-out 0.5;

  &:hover {
    transform: scale(1.05);
  }
}

.swagger2dts-drawer {
  .el-drawer__body {
    overflow: hidden;
  }

  .code-box {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .code-box-header {
    flex-shrink: 0;
    height: 46px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 10px;
  }

  .code-box-body {
    flex-grow: 1;
    overflow: hidden;
  }
}
</style>
